import { Button, Result, Modal } from 'antd';
import React, { useState } from 'react';
import router from 'umi/router';
import Details from './Order/Details';

// 这里应该使用 antd 的 404 result 组件，
// 但是还没发布，先来个简单的。

const Success: React.FC<{}> = () => {
  const [visiable, setVisiable] = useState(false);
  return (
    <>
      <Result
        status="success"
        title="订单创建成功"
        extra={[
          <Button key="buy" onClick={() => router.goBack()}>
            继续创建订单
          </Button>,
          <Button type="primary" key="console" onClick={() => setVisiable(true)}>
            查看详情
          </Button>,
        ]}
      />
      <Modal
        title="订单详情"
        visible={visiable}
        maskClosable={true}
        footer={[
          <Button
            key="submit"
            type="primary"
            onClick={() => {
              setVisiable(false);
            }}
          >
            关闭
          </Button>,
        ]}
        onCancel={() => {
          setVisiable(false);
        }}
      >
        <Details />
      </Modal>
    </>
  );
};

export default Success;
